<template>
  <van-form>
    <van-field v-model="item.value" :class="item.class" :type="item.colType" :border="true" :placeholder="placeholder" :disabled="item.disabled" :rules="emailRules">
      <template #label>
        <span class="custom-title">{{ label }}
          <van-icon v-if="help" name="question" @click="showHelp" />
        </span>
      </template>
    </van-field>
  </van-form>
</template>

<script>
import EleBase from './EleBase'

export default {
  name: 'EleEmail',
  extends: EleBase,
  props: {
    item: {
      type: Object, // 类型
      default: null // 默认值
    }
  },
  data() {
    return {
      inputModel: '',
      emailRules: [
        { required: true, message: '请填写您的邮箱！', trigger: 'onBlur' },
        { pattern: /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/, message: '邮箱格式错误！' }]
    }
  },
  computed: {
    errMsg() {
      let str = ''
      if (this.item.required) {
        str = '请输入' + this.item.label
        // const reg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/
        const regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
        if (this.item.value !== '') {
          if (!regEmail.test(this.item.value)) {
            str = '请输入正确的邮箱'
          } else {
            str = ''
          }
        }
      }
      return str
    },
    placeholder() {
      let str = ''
      if (this.item.placeholder) {
        str = this.item.placeholder
      } else if (this.item.label) {
        str = '请输入' + this.item.label
      }
      return str
    }
  },
  mounted () {
  },
  methods: {
  }
}
</script>
